<template>
  <div>
    <div class="ccui-app-container">
      <div class="ccui-advanced-search-wrapper ccui-clearfix">
        <el-search
          :formProp="formData"
          @search="data => {
            searchItem(data);
          }
          "
          :isShowSearch="isShowSearch"
          @change="change"
          class="ccui-highsearch no-print"
          :selectClear="true"
          width="380px"
          :spoNum="3"
        >
          <div class="ccui-tab-wrapper">
            <el-button
              type="table-top-active"
              size="mini"
              @click="tabChange(0)"
            >
              全部({{ total }})
            </el-button>
            <el-button type="table-top" size="mini" @click="tabChange(1)">
              待提交
            </el-button>
            <el-button type="table-top" size="mini" @click="tabChange(2)">
              审批中
            </el-button>
            <el-button type="table-top" size="mini" @click="tabChange(3)">
              审批退回
            </el-button>
          </div>
          <div class="ccui-extend-btn" style="display: flex">
            <el-button
              size="mini"
              type="primary"
              icon="icon-ccui-add-sup"
              style="float: right"
              @click="handleAdd"
            >
              新增</el-button
            >
          </div>
          <template slot="search">
            <el-input
              v-model="formData.writeOffName"
              placeholder="请输入冲销单名称模糊查询"
              searchLabel="冲销单名称"
              clearable
            ></el-input>
            <el-input
              v-model="formData.writeOffCode"
              placeholder="请输入冲销单编号模糊查询"
              searchLabel="冲销单编号"
              clearable
            ></el-input>
            <el-input
              v-model="formData.partyBName"
              placeholder="请输入供应商模糊查询"
              searchLabel="供应商"
              clearable
            ></el-input>
            <el-input
              v-model="formData.reportInOrgName"
              placeholder="请输入填报单位模糊查询"
              searchLabel="填报单位"
              clearable
            ></el-input>
            <el-select
              v-model="formData.writeOffStatus"
              placeholder="请选择"
              searchLabel="状态"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </template>
          <el-input
            v-model="formData.writeOffName"
            placeholder="请输入冲销单名称模糊查询"
            searchLabel="冲销单名称"
            slot="searchItem2"
            clearable
          ></el-input>
          <el-input
            v-model="formData.writeOffCode"
            placeholder="请输入冲销单编号模糊查询"
            searchLabel="冲销单编号"
            slot="searchItem1"
            clearable
          ></el-input>
          <el-input
            v-model="formData.partyBName"
            placeholder="请输入供应商模糊查询"
            searchLabel="供应商"
            clearable
            slot="searchItem3"
          ></el-input>
          <el-input
            v-model="formData.reportInOrgName"
            placeholder="请输入填报单位模糊查询"
            searchLabel="填报单位"
            slot="searchItem4"
            clearable
          ></el-input>
          <el-select
            v-model="formData.writeOffStatus"
            placeholder="请选择"
            searchLabel="状态"
            slot="searchItem5"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-search>
      </div>
      <!-- 表格 -->
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          align="center"
          ref="listDataTable"
          :data="tableData"
          :isshow="true"
          border
          max-height="9999"
          class="ccui-multifunctional-table"
          :cell-style="cellStyle"
          @cell-click="cellClick"
        >
          <el-table-column type="index" label="序号" width="48" fixed="left" />
          <template v-for="(table, index) in tableColumnData">
            <el-table-column
              :key="index"
              :prop="table.prop"
              :align="table.align"
              :label="table.label"
              :width="table.width"
              :fixed="table.fixed"
              show-overflow-tooltip
              :formatter="formatterList[table.formatterName]"
              :header-align="'left'"
            ></el-table-column>
          </template>
          <el-table-column label="操作" fixed="right" width="80">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                type="text"
                @click="editList(row)"
                v-if="
                  row.writeOffStatus == 2 ||
                    row.writeOffStatus == 6 ||
                    row.writeOffStatus == 4
                "
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="deleteRow(row)"
                v-if="row.writeOffStatus == 2 || row.writeOffStatus == 4"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="resetRow(row)"
                v-if="row.writeOffStatus == 3"
                >撤回</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="ccui-table-footer" v-if="tableData.length">
          <div id="ccui-paging">
            <el-pagination
              :total="total"
              :page-size="pageSizeCode"
              :current-page="pageNoCode"
              prev-text="< 上一页"
              next-text="下一页 >"
              background
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @prev-click="handlePrev"
              @next-click="handleNext"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleGoPage"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  listPageInvoiceWriteOff,
  removeInvoiceWriteOff,
  revokeInvoiceWriteOff
} from "../api";
// import { formatNumber } from "../../../../basa/utils";
import { getSessionItem, setSessionItem } from "@/basa/utils";
export default {
  data() {
    return {
      isShowSearch: true,
      formData: {
        writeOffCode: "", //冲销单编号
        writeOffName: "", //冲销单名称
        partyBName: "", //供应商
        reportInOrgName: "", //填报单位
        writeOffStatus: "" //冲销状态
      },
      formDataSearch: {},
      tableName: this.tableList.invoicereversal,
      options: {
        2: "待提交",
        3: "审批中",
        4: "已撤回",
        5: "审批通过",
        6: "审批退回"
      },
      // pageSizeCode: 1,
      pageSizeCode: this.getLocalPageSize(),
      pageNoCode: 1,
      pagesize: 10,
      total: 0,
      tableData: [],
      tableColumnData: [
        {
          prop: "writeOffCode",
          label: "冲销单编号",
          fixed: "left",
          width: "150"
        },
        {
          prop: "writeOffName",
          label: "冲销单名称",
          width: "150"
        },
        {
          label: "发票单编号",
          prop: "invoiceCode",
          width: "150",
          checked: true
        },
        {
          prop: "partyBName",
          label: "供应商",
          width: "200"
        },
        // {
        //   prop: "contractSignDeptName",
        //   label: "合同签订单位"
        // },
        {
          prop: "settlementCode",
          label: "结算单编号",
          width: "150"
        },
        {
          prop: "settlementName",
          label: "结算单名称",
          width: "300"
        },
        {
          prop: "writeOffAmount",
          label: "冲销金额",
          width: "140",
          align: "right"
        },
        {
          prop: "reportInOrgName",
          label: "填报单位",
          width: "200"
        },
        // {
        //   label: "发票金额(含税)",
        //   prop: "currentInvoiceAmount",
        //   width: "140",
        //   checked: true,
        //   align:'right',
        // },
        {
          prop: "compileUser",
          label: "编制人",
          width: "60"
        },
        {
          prop: "compileDate",
          label: "编制日期",
          width: "100",
          formatterName: "compileDatehandler"
        },
        {
          prop: "amountExcludeTax",
          label: "不含税金额",
          width: "130",
          align: "right"
        },
        {
          prop: "tax",
          label: "税额",
          width: "130",
          align: "right"
        },
        // {
        //   prop: "invoiceTypeName",
        //   label: "发票类型",
        //   width: "90"
        // },
        {
          prop: "currency",
          label: "币种",
          width: "130"
        },
        {
          prop: "writeOffStatus",
          label: "状态",
          formatterName: "writeOffStatushandler",
          width: "120"
        }
      ],
      formatterList: {
        writeOffStatushandler(row) {
          switch (row.writeOffStatus) {
            case "2":
              return "待提交";
            case "3":
              return "审批中";
            case "4":
              return "已撤回";
            case "5":
              return "审批通过";
            case "6":
              return "审批退回";
          }
        },
        compileDatehandler(row) {
          if (row.compileDate) {
            let newVal = row.compileDate.substring(0, 10);
            return newVal;
          }
        }
      }
    };
  },
  activated() {
    //搜索条件置空
    this.formData={
        writeOffCode: "", //冲销单编号
        writeOffName: "", //冲销单名称
        partyBName: "", //供应商
        reportInOrgName: "", //填报单位
        writeOffStatus: "" //冲销状态
      },
    this.pageNoCode = 1 ;
    this.listPageInvoiceWriteOff();
  },
  methods: {
    listPageInvoiceWriteOff(reqObj) {
      let iwriteOffStatus = "";
      if (this.formData.writeOffStatus == "待提交") {
        iwriteOffStatus = "2";
      } else if (this.formData.writeOffStatus == "审批中") {
        iwriteOffStatus = "3";
      } else if (this.formData.writeOffStatus == "已撤回") {
        iwriteOffStatus = "4";
      } else if (this.formData.writeOffStatus == "审批通过") {
        iwriteOffStatus = "5";
      } else if (this.formData.writeOffStatus == "审批退回") {
        iwriteOffStatus = "6";
      }
      let obj = {};
      obj = typeof reqObj == "object" ? reqObj : obj;
      obj.pageNo = this.pageNoCode;
      obj.pageSize = this.pageSizeCode;
      obj.writeOffStatus = iwriteOffStatus;
      // listPageInvoiceWriteOff({
      //   ...this.formData,
      //   writeOffStatus: iwriteOffStatus,
      //   pageSize: this.pagesize,
      //   pageNo: this.pageNoCode
      // }).then(res => {
      //   this.tableData = res.data.data.rows;
      //   this.tableData.forEach(item => {
      //     item.tax = Number(item.tax).toFixed(2);
      //     item.writeOffAmount = Number(
      //       item.writeOffAmount).toFixed(2);
      //     item.amountExcludeTax = Number(item.amountExcludeTax).toFixed(2);
      //   });
      //   this.total = res.data.data.recordsTotal;
      // });
      listPageInvoiceWriteOff(obj).then(res => {
        this.tableData = res.data.data.rows;
        this.tableData.forEach(item => {
          item.tax = Number(item.tax).toFixed(2);
          item.writeOffAmount = Number(
            item.writeOffAmount).toFixed(2);
          item.amountExcludeTax = Number(item.amountExcludeTax).toFixed(2);
        });
        this.total = res.data.data.recordsTotal;
      });
    },
    searchItem(data) {
      console.log('搜索条件',data)
      this.pageNoCode = 1;
      this.formDataSearch = data;
      this.localSearchData = JSON.parse(JSON.stringify(data));
      setSessionItem("pageNo", this.tableName, {
        pageNo: this.pageNoCode,
        searchForm: this.localSearchData
      });
      this.listPageInvoiceWriteOff(this.formDataSearch);
    },
    change(index, key, value) {
      const formDataKeys = Object.keys(this.formData);
      formDataKeys.map(_ => {
        if (_ !== key) this.formData[_] = "";
      });
    },
    // 新增
    handleAdd() {
      this.$router.push({
        path: "/invoice/manage/new-add",
        query: {
          newAdd: 1
        }
      });
    },
    tabChange(index) {
      switch (index) {
        case 0:
          this.$router.push("/invoice/manage/all-list");
          break;
        case 1:
          this.$router.push("/invoice/manage/to-submit");
          break;
        case 2:
          this.$router.push("/invoice/manage/approve-pendding");
          break;
        case 3:
          this.$router.push("/invoice/manage/approve-return");
          break;
      }
    },
    // 获取默认分页
    getLocalPageSize() {
      return getSessionItem("pageSize", this.tableList.invoicereversal) || 10;
    },
    handleSizeChange(val) {
      // this.pagesize = val;
      // this.listPageInvoiceWriteOff();
      // console.log(`每页 ${val} 条`);
       this.pageNoCode = 1;
       if (val !== "none") {
        this.pageSizeCode = val;
        setSessionItem("pageSize", this.tableName, val);
      }
      this.listPageInvoiceWriteOff(this.formDataSearch)
    },
    handleCurrentChange(val) {
      this.pageNoCode = val;
      this.listPageInvoiceWriteOff(this.formDataSearch);
      // console.log(`当前页: ${val}`);

    },
    internalCurrentPage(val) {
      console.log(val);
      val = 10;
      console.log(`当前22页: ${val}`);
    },
    handlePrev() {},
    handleNext() {},
    handleGoPage() {
      console.log(111);
    },
    deleteRow(row) {
      this.$confirm("您确定要删除吗？", "删除确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "ccui-message-box-custom"
      })
        .then(() => {
          removeInvoiceWriteOff({ id: row.id }).then(res => {
            if (res.data.code == "0") {
              this.$message({
                type: "success",
                message: res.data.message,
                showClose: true,
                ccuiCustom: true
              });
              this.listPageInvoiceWriteOff();
            }
          });
        })
        .catch(() => {});
    },
    resetRow(row) {
      this.$confirm("您确定要撤回吗？", "删除确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "ccui-message-box-custom"
      })
        .then(() => {
          revokeInvoiceWriteOff({ id: row.id }).then(res => {
            if (res.data.code == "0") {
              this.$message({
                type: "success",
                message: res.data.message,
                showClose: true,
                ccuiCustom: true
              });
              this.listPageInvoiceWriteOff();
            }
          });
        })
        .catch(() => {});
    },
    editList(row) {
      this.$router.push({
        path: "/invoice/manage/edit-detail",
        query: {
          id:row.id,
          writeOffCode:row.writeOffCode,
          writeOffStatus:row.writeOffStatus,
          writeOffApproveStatus:row.writeOffApproveStatus,
          writeOffApproveTime:row.writeOffApproveTime,
          writeOffName:row.writeOffName
        }
      });
    },
    cellClick(row, column) {
      if (column.label === "冲销单编号") {
        console.log('点击行信息',row)
        this.$router.push({
          path: "/invoice/manage/list-detail",
          query: {
            id: row.id,
            invoiceName:row.writeOffName,
            enterApproveStatus:row.writeOffStatus
          }
        });
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (["writeOffCode"].includes(column.property)) {
        return { color: "#0089EF", cursor: "pointer" };
      }
    }
  },
  mounted() {
    this.listPageInvoiceWriteOff();
  }
};
</script>
<style lang="scss" scoped></style>
